<template>
  <view class="cu-bar tabbar tabbar-view bg-white" v-show="navbarShow">
    <view v-for="(item,index) in navLists" class="active action" :key="index">
      <view v-if="index===2" class="action add-action" @click="changeTab(index,item.navPage)">
        <i class="cu-btn new cuIcon-add bg-blue shadow"></i>
        {{item.navText}}
      </view>
      <view v-else @click="changeTab(index,item.navPage)">
        <i :class="selected === index ? item.icon+'fill' : item.icon"></i>
        {{item.navText}}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      //当前高亮项
      selected: 3,
      navLists: [
        {
          navText: "课程表",
          navPage: "/course/index",
          icon: "cuIcon-countdown"
        },
        {
          navText: "微音",
          navPage: "/weiyin/index",
          icon: "cuIcon-mark"
        },
        {
          navText: "发布",
          navPage: "/publish/index",
          icon: ""
        },
        {
          navText: "主页",
          navPage: "/home/appmenu",
          icon: "cuIcon-circle"
        },
        {
          navText: "我的",
          navPage: "/my/index",
          icon: "cuIcon-my"
        }
      ],

      navbarShow: false
    };
  },
  watch: {
    // Route change trigger unchangedTab() method
    $route: "showNavbar"
  },
  created(){
    this.showNavbar()
  },
  methods: {
    //显示或隐藏底部导航栏
    showNavbar() {
      let page = this.$route.path;
      if (
        page != "/pages/my/index" &&
        page != "/" &&
        page != "/pages/weiyin/index" &&
        page != "/pages/course/index"
      ) {
        this.navbarShow = false;
        return
      }
      this.navbarShow = true;
    },
    //底部切换
    changeTab(i, page) {
      wx.setStorage({
        key: "navbar",
        data: page
      });
      this.selected = i;
      uni.navigateTo({
        url: "/pages" + page
      });
    }
  }
};
</script>